<template>	
	<el-dialog
	  title="裁剪图片面板"
	  :visible.sync="isShow"
	  width="40%"
	  :before-close="handleClose"> 
	  <div class="containerbox">
	  	<div class="input-box">
	  		<a href="javascript:;" class="file">选择文件  
	  		<input 
		    	type="file" 
		    	name="image" 
		    	accept="image/*"
		        style="font-size: 1.2em; 
		        padding: 10px 0;"
		        @change="setImage" 
		    />
		    </a>
	  	</div>
	  	<div class="cutimg-box">
	  		<div class="cutImgBox"  @click="cutOk">
	  			<vue-cropper
		          ref='cropper'
		          :guides="true"
		          :view-mode="2"
		          drag-mode="crop"
		          :auto-crop-area="0.5"
		          :min-container-width="250"
		          :min-container-height="180"
		          :background="true"
		          :rotatable="true"
		          :src="imgSrc"	         
		          alt="Source Image"
		          :img-style="{ 'width': '100%', 'height': '2.5rem' }">
	            </vue-cropper>
	  		</div>
	  		<div class="cutedImg">
	  			<img :src="cropImg" class="cutFinishedImg" /> 
	  		</div>
	  	</div>
	  </div>
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="handleClose" >取 消</el-button>
	    <el-button type="primary" @click="btnOk">确 定</el-button>
	  </span>
	  
	</el-dialog>		
</template>

<script>
	
	import VueCropper from 'vue-cropperjs';
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	export default {
    components: {
      VueCropper,
    },
    data() {
      return {      
        imgSrc: '',
        cropImg: ''
      
      };
    },
    methods: {
      handleClose() {    	
           this.$store.dispatch('cutImageplugin/hidecutImagePanel')     
      },
      cutOk(){               
      	this.cropImage();
      },
      btnOk(){
           this.$store.dispatch('cutImageplugin/hidecutImagePanel')            
           this.$store.dispatch('cutImageplugin/setcutImageData',this.cropImg)   
      },
      setImage(e) {
      	
        const file = e.target.files[0];
        if (!file.type.includes('image/')) {
          alert('Please select an image file');
          return;
        }
        if (typeof FileReader === 'function') {
          const reader = new FileReader();
        
          reader.onload = (event) => {
          	
            this.imgSrc = event.target.result;                  
            this.$refs.cropper.replace(event.target.result);
          };
          reader.readAsDataURL(file);
       
        } else {
          alert('Sorry, FileReader API not supported');
        }
        
      },
      cropImage() {      
        this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
      },
      rotate() {      
        this.$refs.cropper.rotate(90);
      },
    },
    computed:{
    	 ...mapState({                            
					  isShow:state=>state.cutImageplugin.cutImagePanel 						                                             
					})
    }
  };
</script>

<style lang="scss">
	
	.containerbox{
		width:100%;
		height: 3rem;
	
		.input-box{
			height: .5rem;
			float: left;
			width:100%;
			.file {
				    position: relative;
				    display: inline-block;
				    background: #D0EEFF;
				    border: 1px solid #99D3F5;
				    border-radius: 4px;
				    padding: 4px 12px;
				    overflow: hidden;
				    color: #1E88C7;
				    text-decoration: none;
				    text-indent: 0;
				    line-height: 20px;
				}
				.file input {
				    position: absolute;
				    font-size: 100px;
				    right: 0;
				    top: 0;
				    opacity: 0;
				}
				.file:hover {
				    background: #AADFFD;
				    border-color: #78C3F3;
				    color: #004974;
				    text-decoration: none;
				}
			
		}
		.cutimg-box{
			height: 2.5rem;
			width:100%;
			float: left;
			
			.cutImgBox{
				float: left;
				width:60%;
				height: 100%;
				border: 1px solid #DEDEDE;
			}
			.cutedImg{
				float: left;
				width:40%;
				height: 100%;
				img{
					width:50%;
					height: 50%;									
					margin-top:25%;
					margin-left: 25%;
				}
				
			}
		}
	}
</style>